<script>
  import Svelvet from "svelvet"
  import Login from "./Login.svelte"
  import Home from "./Home.svelte"
  import About from "./About.svelte"

  const initialNodes = [
    {
      id: 1,
      position: { x: -550, y: -200 },
      data: { custom: Login },
      width: 300 * 0.8,
      height: 300 * 0.8,
      bgColor: "white",
    },
    {
      id: 2,
      position: { x: -850, y: 250 },
      data: { custom: Home },
      width: 300,
      height: 300,
      bgColor: "white",
    },
    {
      id: 3,
      position: { x: -450, y: 250 },
      data: { custom: About },
      width: 300,
      height: 300,
      bgColor: "white",
    },
  ]

  const initialEdges = [
    { id: "e1-2", source: 1, target: 2, label: "connection" },
  ]
</script>

<Svelvet
  nodes={initialNodes}
  width={1000}
  height={1000}
  initialZoom={1}
  initialLocation={initialNodes[2].position}
  edges={initialEdges}
  bgColor={"#EEEEEE"}
  nodeLink
  nodeCreate
  background
  minimap={true}
/>
<!--  	minimap={true} -->
